<template>
  <div>
    <el-card :body-style="{ padding: '30px' }" shadow="never">
      <el-divider content-position="left">管理员权限分组</el-divider>
      <div class="pb-4 d-flex jc-between ai-center">
        <div>
          <el-button size="small" plain @click="fetchData()"> <i class="el-icon-refresh-left"></i> 刷新</el-button>
          <perbtn @click="showModel('add')" type="primary" plain perms="group:add"><i class="el-icon-plus"></i> 添加数据</perbtn>
          <perbtn @click="deleteRows()" type="danger" :disabled="sels.length==0" plain perms="group:delete-list">
            <i class="el-icon-delete"></i>删除数据</perbtn>
        </div>
      </div>

      <seniorTables :tableData="tableData" :fileds="tableFileds" @selectionChange="val=>sels=val">
        <template slot-scope="{row}" slot="options">
          <perbtn @click="showModel('details',row.id)" type="text" perms="group:details">查看</perbtn>
          <el-divider direction="vertical"></el-divider>
          <perbtn @click="showModel('edit',row.id)" type="text" perms="group:edit">编辑</perbtn>
          <el-divider direction="vertical"></el-divider>
          <perbtn @click="deleteRow(row.id)" type="text" perms="group:delete">删除</perbtn>
        </template>
      </seniorTables>

      <el-pagination class="pt-4 d-flex jc-end" @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
      </el-pagination>
    </el-card>
    <model ref="model" v-model="isOpen" @fetchData="fetchData"></model>
  </div>
</template>

<script>
import model from './model.vue'
import view from '@/mixins/view'
import perbtn from '@/components/perbtn'

export default {
  mixins: [view],
  data () {
    return {
      api: this.$api.group,
      tableFileds: [
        {
          label: 'ID',
          prop: 'id'
        },
        {
          label: '分组名称',
          prop: 'groupName'
        },
        {
          label: '备注',
          prop: 'remarks'
        },
        {
          label: '创建时间',
          prop: 'created_time'
        },
        {
          label: '操作',
          prop: 'options',
          custom: true
        }
      ]
    }
  },
  components: {
    model,
    perbtn
  },
  created () {
    this.fetchData()
  },
}
</script>

<style scoped>
</style>
